/**
 * 全局可复用的钩子函数 (页面业务相关)
 */
import { ref, onMounted } from 'vue'
import { findBanner } from '@/api/home'
import { message } from '@/components/Message/index.js'
import schema from '@/utils/vee-validate-schema'
import { useCountDown } from '@/hooks/index'

export const useBanner = () => {
  const slidersData = ref([])
  // 获取轮播图数据
  const getSlidersData = async () => {
    const { result } = await findBanner()
    // console.log(res)
    slidersData.value = result
  }

  onMounted(() => {
    getSlidersData()
  })
  return { slidersData }
}

// 发送验证码
export const useSendCode = (formData, sendApi) => {
  // 获取表单组件实例
  const fm = ref()
  // 使用倒计时函数
  const { count, start } = useCountDown(60)
  /**
   * 思路
   * 1- 准备倒计时hook和点击发验证码的方法
   * 2- 发送要校验手机号格式
   * 3- 通过校验同时不是倒计时状态, 才进行发送 => 60s内不能重复发送
   */
  // 点击事件
  const handlerCode = async () => {
    // validate 通过true | 不通过是错误信息字符
    const validate = schema.mobile(formData.mobile)
    if (validate === true) {
      // 是正确的手机号才能发送验证码
      // 判断是否是发送中 ? => count === 0 (没有发送) | count !== 0 (正在发送)
      try {
        await sendApi(formData.mobile)
        message({ type: 'success', text: '发送成功！' })
        // 发完请求，开始倒计时
        start()
      } catch (error) {
        message({ type: 'error', text: error.response.data.message })
      }
    } else {
      // 手机号格式错误 => js触发错误信息的显示
      fm.value.setFieldError('mobile', validate)
    }
  }

  return { handlerCode, fm, count }
}
